<template>
  <div>
    <div class="total" v-if="$route.name === 'WashHouse'">
      <div
        class="one"
        @click="goMachine(item.washhouse_id)"
        v-for="(item, index) in houseList"
        :key="index" 
        @mouseover="mouseHover(index)"
        @mouseout="mouseOut(index)">
      <div ref="delicon" class="yincang">
       <div class="el-icon-thumb">
         &nbsp;&nbsp;进入洗衣机</div>
        <br/>
        <div>名字：{{ item.washhouse_name }}</div>
        <div>地址：{{ item.washhouse_address }}</div>
        <div>创建时间：{{ item.washhouse_creation_time }}</div>
        <div>洗衣机数量：{{ item.washing_machine }}</div>
       
      </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      houseList: [],
    };
  },
  mounted() {
    http.houseData().then((r) => {
      console.log(r);
      this.houseList = r.data.data;
    });
  },
  methods: {
    //鼠标离开 隐藏
    mouseOut(index) {
      this.$refs.delicon[index].style.display = 'none ';
    },
    //鼠标悬浮 显示
    mouseHover(index) {
       this.$refs.delicon[index].style.display = 'block';
        this.$refs.delicon[index].style.backgroundColor =' rgba(183, 185, 185,0.9)';
    },
    goMachine(index) {
      this.$router.push({
        name: 'WashMachine',
        params: {
          houseid: index,
        },
      });
    },
  },
};
</script>
<style scoped>
.total {
  width: 90%;
  height: 800px;
  /* background-color: rgb(231, 231, 231); */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
   
}
.total :hover{

  /* 当鼠标划过的时候缩放(动画效果): 
  scale(x,y)， x和y都是1倍展示，如果是scale(2,2) 就是原始大小的2倍展示*/
  transform: scale(1.1);
  transition: linear;
  /* 外阴影:box-shadow: x轴  y轴 px 颜色 */
  box-shadow: 0px 0px 15px rgb(161, 161, 161);
}
.one {
  border-radius: 5%;
  width: 27%;
  height: 385px;
   /* 背景色透明度 */
  /* background-color: rgba(28, 102, 136, 0.5); */
  margin-top: 20px;
  border: 1px solid rgb(218, 216, 205);
  transition:1s;
  /* background-image: url(../../static/image/001.png); */
   /* css添加背景图*/
  background-image: url(../../static/image/004.jpg);

}
.one div{
  color: rgb(95, 97, 96);
  /* css阻止事件冒泡 */
  pointer-events: none;
  line-height: 40px;
  position: relative;
  left: 18px;
  top:60px ;
  /* color: #707b84;
  background: #3e464d; */
}
.one :hover{
   background-color: rgb(183, 185, 185);
}
 .item {
      margin: 4px;
    }
    .el-icon-thumb{
      /* display:none; */
      color: rgb(57, 89, 102) !important;
      font-weight:bolder;
      /* width: 120px; */
      /* text-align: center; */
      /* border:1px solid tomato; */
      font-size: 23px;
      
    }
  .yincang{
    display:none;
    width: 100%;
    height: 390px;
    border-radius: 5%;
    position: relative !important;
    left: 0px !important;
    top: -2px !important;
  }
</style>